<!-- 兑换记录页面 -->
<template>
	<view class="for-record">
		<view class="item" v-for="(item,index) in list" :key="item.id">
			<view class="top">
				<view class="left">
					<image :src="item.avatar" mode="aspectFit"></image>
					<text>{{item.nickname}}</text>
				</view>
				<text>{{item.create_time}} 领取</text>
			</view>
			<view class="bottom">
				<view class="left">
					<p>{{item.name}}</p>
					<p>有效期：{{item.start_time}}-{{item.end_time}}</p>
				</view>
				<button :class="item.state == 1 ? 'active' : 'noActive'">{{item.status_label}}</button>
			</view>
		</view>
		<view class="footer-tit">
			<text>没有更多记录了</text>
		</view>
	<!-- 空状态 -->
		<view v-if="emptyShow" class="empty-state">
			<image src="../../static/images/kong.png" mode="aspectFit"></image>
			<p>还没有任何兑换哦</p>
		</view>
		<u-toast ref="uToast" />
	</view>
</template>

<script>
	import {shareMixins} from '../../mixins/share.js'
	export default {
		mixins:[shareMixins],
		data() {
			return {
				shareData: {
				    title: '空港卡券联盟商户端',
				    path: '/pages/mine/mine' // 分享的页面路径
				},
				list:[],
				emptyShow:false,
				pindex:1,
				id:''
			}
		},
		onShow() {
			this.id = uni.getStorageSync('id')
			this.pindex = 1
			this.list = []
			this.getCouponExchangeRecord()
			uni.removeStorageSync('id')
		},
		onTabItemTap(e) {//切换tabbar时监听是否登录
			if(e.index === 1){
				let openid = uni.getStorageSync('openid')
				if(openid == ''){
					this.$refs.uToast.show({
						title:'请先登录！',
						type:'error'
					})
					setTimeout(() => {
						uni.redirectTo({
							url:'../login/login'
						})
					},600)
				}
			}
		},
		onReachBottom(){
			this.pindex++
			this.getCouponExchangeRecord()
		},
		methods: {
			async getCouponExchangeRecord(){//获取兑换记录列表
				var data = {
					coupon_id:this.id,
					pindex:this.pindex,
					psize:5
				}
				const res = await this.$myRequest({
					url:'/api/businessCoupon/getCouponExchangeRecord'+this.$u.queryParams(data),
				}).then((res) => {
					if(res.data.code == 200){
						this.list = [...this.list,...res.data.data.data]
						if(this.list.length == 0){
							this.emptyShow = true
						}else{
							this.emptyShow = false
						}
					}else{
						this.$refs.uToast.show({
							title:res.data.msg,
							type:'error'
						})
					}
					this.list.forEach((i) => {
						i.state = 1	
						if(i.status_label === '已使用'){
							i.state = 2
						}else if(i.status_label != '已使用'){
							i.state = 1
						}
					})
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.for-record{
		padding: 26rpx 30rpx;
		.item{
			border: 1px solid #F9E5DE;
			border-radius: 20rpx;
			margin-bottom: 20rpx;
			.top{
				padding: 24rpx 28rpx 20rpx 34rpx;
				background-color: #FFFFFF;
				display: flex;
				align-items: center;
				justify-content: space-between;
				// border-radius: 20rpx;
				border-top-left-radius: 20rpx;
				border-top-right-radius: 20rpx;
				border-bottom: 1px dashed #EC5F2F;
				.left{
					display: flex;
					align-items: center;
					image{
						width: 68rpx;
						height: 68rpx;
						margin-right: 26rpx;
						border-radius: 12rpx;
					}
					text{
						font-size: 34rpx;
						color: #3C3C3C;
						font-weight: bold;
					}
				}
			}
			.bottom{
				padding: 18rpx 28rpx 30rpx 34rpx;
				background-color: #FFFFFF;
				display: flex;
				align-items: center;
				justify-content: space-between;
				border-bottom-left-radius: 20rpx;
				border-bottom-right-radius: 20rpx;
				.left{
					p:nth-child(1){
						font-size: 34rpx;
						color: #731400;
						font-weight: bold;
					}
					p:nth-child(2){
						font-size: 24rpx;
						color: #8B8B8B;
					}
				}
				.active{
					width: 120rpx;
					height: 48rpx;
					color: #FFFFFF;
					font-size: 22rpx;
					background: linear-gradient(#FFB487,#EC5F2F);
					display: flex;
					align-items: center;
					justify-content: center;
					border-radius: 26rpx;
					margin: 0;
					padding: 0;
				}
				.noActive{
					width: 120rpx;
					height: 48rpx;
					color: #FFFFFF;
					font-size: 22rpx;
					background-color: #3C3C3C;
					display: flex;
					align-items: center;
					justify-content: center;
					border-radius: 26rpx;
					margin: 0;
					padding: 0;
				}
				
			}
		}
		.footer-tit{
			margin-top: 100rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			text{
				font-size: 24rpx;
				color: #8B8B8B;
			}
		}
		.empty-state{
			text-align: center;
			image{
				width: 220rpx;
				height: 236rpx;
				margin-top: 146rpx;
				margin-bottom: 44rpx;
			}
			p{
				font-size: 28rpx;
				color: #8B8B8B;
			}
		}
	}
</style>
